<template>
    <div class="main1">
        <div class="ml">
            <div class="mt">
                <!-- 平安晾晒 -->
                <div class="mt-s">
                    <div class="mt-s-i">
                        <img src="@/assets/Group 1321314875@2x.png" alt="">
                        <el-select v-model="posItem" placeholder="请选择">
                            <el-option v-for="(item, index) in posList" :key="index" :label="item" :value="item">
                            </el-option>
                        </el-select>
                        <span>{{ posItem }}</span>
                        <i class="el-icon-caret-bottom"></i>
                    </div>
                    <div class="mt-s-i">
                        <img src="@/assets/Group 1321314875@2x.png" alt="">
                        <el-select v-model="yearItem" placeholder="请选择">
                            <el-option v-for="(item, index) in yearList" :key="index" :label="item" :value="item">
                            </el-option>
                        </el-select>
                        <span>{{ yearItem }}年</span>
                        <i class="el-icon-caret-bottom"></i>
                    </div>
                    <div class="mt-s-i">
                        <img src="@/assets/Group 1321314875@2x.png" alt="">
                        <el-select v-model="monthItem" placeholder="请选择">
                            <el-option v-for="(item, index) in monthList" :key="index" :label="item" :value="item">
                            </el-option>
                        </el-select>
                        <span>{{ monthItem }}月</span>
                        <i class="el-icon-caret-bottom"></i>
                    </div>
                </div>
            </div>
            <Cl1 :infoData="infoData" :posItem="posItem" :yearItem="yearItem" />
            <Cl2 :infoData="infoData" :posItem="posItem" :yearItem="yearItem" />
            <Cl3 :infoData="infoData" :posItem="posItem" :yearItem="yearItem" />
            <Cl4 :infoData="infoData" :posItem="posItem" :yearItem="yearItem" />
            <Cl5 :infoData="infoData" :posItem="posItem" :yearItem="yearItem" />
            <Cl6 :infoData="infoData" :posItem="posItem" :yearItem="yearItem" />
            <div class="mr">
                <Cl7 :infoData="infoData" :posItem="posItem" :yearItem="yearItem" />
                <Cl8 :infoData="infoData" :posItem="posItem" :yearItem="yearItem" />
            </div>
        </div>
        <div class="ml1">
            <!-- <CM1 :infoData="infoData"  :posItem="posItem" :yearItem="yearItem"/> -->
            <CM2 :infoData="infoData" :posItem="posItem" :yearItem="yearItem" :monthItem="monthItem"/>
            <CM3 :infoData="infoData" :posItem="posItem" :yearItem="yearItem" :monthItem="monthItem"/>
        </div>
        <div class="ml">
            <!-- <div class="mt">考核督办</div> -->
            <CR1 :infoData="infoData" :posItem="posItem" :yearItem="yearItem" />
            <div class="mr">
                <CR2 :infoData="infoData" :posItem="posItem" :yearItem="yearItem" />
                <CR3 :infoData="infoData" :posItem="posItem" :yearItem="yearItem" />
            </div>
            <CR4 :infoData="infoData" :posItem="posItem" :yearItem="yearItem" />
            <CR5 :infoData="infoData" :posItem="posItem" :yearItem="yearItem" />
        </div>
    </div>
</template>

<script>
import Cl1 from './1.vue'
import Cl2 from './2.vue'
import Cl3 from './3.vue'
import Cl4 from './4.vue'
import Cl5 from './5.vue'
import Cl6 from './6.vue'
import Cl7 from './7.vue'
import Cl8 from './8.vue'
import CM1 from './11.vue'
import CM2 from './12.vue'
import CM3 from './13.vue'
import CR1 from './21.vue'
import CR2 from './22.vue'
import CR3 from './23.vue'
import CR4 from './24.vue'
import CR5 from './25.vue'

export default {
    components: { Cl1, Cl2, Cl3, Cl4, Cl5, Cl6, Cl7, Cl8, CM1, CM2, CM3, CR1, CR2, CR3, CR4, CR5 },
    props: ['infoData'],
    data() {
        return {
            posItem: null,
            posList: [],
            yearList: [],
            yearItem: null,
            monthList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
            monthItem: 1,
        }
    },
    watch: {
        infoData: function () {
            this.getMainData();
        }
    },
    mounted() {
        this.getMainData();
    },
    methods: {
        getMainData() {
            Object.keys(this.infoData[8][0]).map((i, o) => {
                if (o !== 0) {
                    this.yearList.push(i)
                }
            })
            this.infoData[8].map((i, o) => {
                this.posList.push(i[0])
            })
            this.posItem = this.posList[0]
            this.yearItem = this.yearList[0]

        }
    }

}
</script>

<style lang="scss" scoped>
.main1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: -15px;

    .mt {
        width: 620px;
        // height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        // background-image: url('../../assets/bttb22.png');
        background-size: 100% 100%;
        color: #Fff;
        font-family: "PMZD";
        font-size: 26px;
        letter-spacing: 10px;
        // margin-bottom: 10px;
        position: relative;
    }

    .ml {
        display: flex;
        width: 620px;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .ml1 {
        margin-top: 30px;
    }

    .mt-s {
        position: absolute;
        display: flex;
        align-items: center;
        right: -465px;
        margin-top: 120px;
        margin-right: -10px;

        .mt-s-i {
            width: 120px;
            height: 30px;
            position: relative;
            display: flex;
            align-items: center;
            box-shadow: 0 0 8px #333;

            img {
                position: absolute;
                z-index: 3;
                width: 120px;
                height: 30px;
                opacity: .6;
            }

            /deep/.el-select {
                position: absolute;
                z-index: 9;
                width: 120px;
                height: 30px;
                opacity: 0;

                .el-input {
                    width: 120px;
                    height: 30px;

                    input {
                        width: 120px;
                        height: 30px;
                    }
                }
            }

            span {
                position: absolute;
                z-index: 4;
                color: #fff;
                font-family: 'SJYHJT';
                letter-spacing: 5px;
                display: inline-block;
                width: 100px;
                text-align: center;
                font-size: 15px;
                height: 30px;
                line-height: 30px;
                text-shadow: 0 0 8px #333;
                padding-left: 10px;
            }

            i {
                position: absolute;
                z-index: 4;
                right: -5px;
            }
        }

        .mt-s-i:nth-of-type(2) {
            margin: 0 20px;
        }
    }
}
</style>